<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>农产品列表 - 助农精准扶贫平台</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .product-card {
            transition: transform 0.3s;
            cursor: pointer;
        }
        .product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container">
            <a class="navbar-brand" href="/">助农精准扶贫平台</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item"><a class="nav-link" href="/">首页</a></li>
                    <li class="nav-item"><a class="nav-link active" href="/products.html">农产品</a></li>
                    <li class="nav-item"><a class="nav-link" href="/cart.html">购物车</a></li>
                    <li class="nav-item"><a class="nav-link" href="/login.html">登录</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container my-5">
        <div class="row mb-4">
            <div class="col-md-8">
                <input type="text" class="form-control" id="searchKeyword" placeholder="搜索农产品...">
            </div>
            <div class="col-md-2">
                <select class="form-control" id="categoryFilter">
                    <option value="">全部分类</option>
                </select>
            </div>
            <div class="col-md-2">
                <button class="btn btn-primary w-100" onclick="searchProducts()">搜索</button>
            </div>
        </div>

        <div class="row" id="productList">
        </div>

        <nav aria-label="分页" class="mt-4">
            <ul class="pagination justify-content-center" id="pagination">
            </ul>
        </nav>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        let currentPage = 1;

        $(document).ready(function() {
            loadCategories();
            loadProducts(1);
        });

        function loadCategories() {
            $.ajax({
                url: '/api/categories/tree',
                method: 'GET',
                success: function(response) {
                    if (response.code === 200) {
                        const categories = response.data;
                        const select = $('#categoryFilter');
                        categories.forEach(cat => {
                            select.append(`<option value="${cat.id}">${cat.name}</option>`);
                        });
                    }
                }
            });
        }

        function loadProducts(page) {
            const keyword = $('#searchKeyword').val();
            const categoryId = $('#categoryFilter').val();

            $.ajax({
                url: '/api/products/list',
                method: 'GET',
                data: { 
                    page: page, 
                    size: 12,
                    keyword: keyword,
                    categoryId: categoryId
                },
                success: function(response) {
                    if (response.code === 200) {
                        renderProducts(response.data.records);
                        renderPagination(response.data);
                        currentPage = page;
                    }
                }
            });
        }

        function searchProducts() {
            loadProducts(1);
        }

        function renderProducts(products) {
            const container = $('#productList');
            container.empty();
            
            if (products.length === 0) {
                container.append('<div class="col-12 text-center"><p>暂无农产品</p></div>');
                return;
            }

            products.forEach(product => {
                const card = `
                    <div class="col-md-3 mb-4">
                        <div class="card product-card" onclick="location.href='/product_detail.html?id=${product.id}'">
                            <img src="${product.coverUrl}" class="card-img-top" alt="${product.name}" 
                                 onerror="this.src='https://via.placeholder.com/300x200?text=${product.name}'" style="height: 200px; object-fit: cover;">
                            <div class="card-body">
                                <h5 class="card-title">${product.name}</h5>
                                <p class="text-muted small">${product.region || ''}</p>
                                <p class="text-danger fw-bold">¥${product.price}/${product.unit}</p>
                                <p class="text-muted small">库存：${product.stock}${product.unit}</p>
                            </div>
                        </div>
                    </div>
                `;
                container.append(card);
            });
        }

        function renderPagination(pageData) {
            const pagination = $('#pagination');
            pagination.empty();

            const totalPages = pageData.pages;
            const current = pageData.current;

            if (totalPages <= 1) return;

            if (current > 1) {
                pagination.append(`<li class="page-item"><a class="page-link" href="#" onclick="loadProducts(${current - 1}); return false;">上一页</a></li>`);
            }

            for (let i = 1; i <= totalPages; i++) {
                const active = i === current ? 'active' : '';
                pagination.append(`<li class="page-item ${active}"><a class="page-link" href="#" onclick="loadProducts(${i}); return false;">${i}</a></li>`);
            }

            if (current < totalPages) {
                pagination.append(`<li class="page-item"><a class="page-link" href="#" onclick="loadProducts(${current + 1}); return false;">下一页</a></li>`);
            }
        }
    </script>
</body>
</html>

